<template>
  <view>
    <!-- 头部导航栏 -->
    <view class="top-navigate bg-white" style="padding: 53px 10px 15px 10px;">
      <navigator class="content text-black cuIcon-peoplelist runner" hover-class="none"
        url="../../subpkg-runner/runner-person-center/runner-person-center" open-type="redirect">
      </navigator>
      <view class="text-xl text-black top-navigate-title">抢单大厅</view>
    </view>
    <!-- 导航栏 -->
    <scroll-view scroll-x class="bg-white nav" style="margin-top: -5px;">
      <view class="flex text-center">
        <view class="cu-item flex-sub" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in orderListTitle"
          :key="index" @tap="tabSelect" :data-id="index">
          {{item.name}}{{item.name==='进行中'? `(${orderNum})`:''}}
        </view>
      </view>
    </scroll-view>

    <!-- 可接任务列表 -->
    <keep-alive>
      <view v-for="(item,index) in allOrderList" :key="index" v-if="TabCur===0">
        <rush-orders-card :order="item" @get-order-Info="getItemInfo"></rush-orders-card>
        <!-- <test-flex :order="item"></test-flex> -->
      </view>
      <view v-for="(item,index) in orderfilterList " :key="index" v-if="TabCur===1">
        <order-in-pending-card :order="item" @get-order-Info="getItemInfo"></order-in-pending-card>
        <!-- <test-flex :order="item"></test-flex> -->
      </view>
    </keep-alive>


    <view class="no-more">
      没有更多订单了
    </view>
    <!-- 底部刷新订单 -->
    <view class="cu-bar bg-white tabbar border shop foot">
      <button class="action" open-type="contact">
        <view class="cuIcon-settings text-green">
        </view> 接单设置
      </button>
      <view class="btn-group">
        <button class="cu-btn bg-green round shadow-blur" style="width:85%;" @click="refreshOrder">刷新订单</button>
      </view>
    </view>

    <!-- 加载框 -->
    <view class="cu-load load-modal" v-if="loadModal">
      <!-- <view class="cuIcon-emojifill text-orange"></view> -->
      <image src="/static/logo.png" mode="aspectFit"></image>
      <view class="gray-text">加载中...</view>
    </view>
  </view>
</template>

<script>
  import amap from '@/helper/amap-wx.130.js'
  import {
    mapState,
    mapActions
  } from 'vuex'
  const db = uniCloud.database();
  export default {
    data() {
      return {
        amapPlugin: null,
        key: '395d7dee752cc1f00bfee27142e41f85',
        cityName: '',
        loadedCount: 0,
        TabCur: 0,
        loadModal: false,
        scrollLeft: 0,
        allOrderList: [],
        runnerOrderList:[],
        orderListTitle: [{
            name: '接任务',
            count: null
          },
          {
            name: '进行中',
            count: 1
          },
        ],
      };
    },
    created() {
      //获取所有符合的订单信息
      this.getAllOrder();
      this.getAllOrderList();
    },
    onShow() {
      console.log('骑手订单：',this.orderfilterList);
    },
    methods: {
      ...mapActions('m_runner', ['getAllOrderList']),
      //订单类型导航切换
      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
      },
      //获取所有订单
      async getAllOrder() {
        this.loadModal = true
        const {
          result: res
        } = await db.collection("my_order").get()
        this.allOrderList = res.data.filter((item) => item.state === '待接单')
        this.loadModal = false
      },
      //订单刷新
      refreshOrder() {
        this.allOrderList = []
        this.getAllOrder()
      },
      //获取订单详情信息
      getItemInfo(item) {
        console.log(item);
      },

    },
    computed: {
      ...mapState('m_runner', ['runnerInfo','orderList']),
      orderfilterList(){
        return this.orderList.filter((item)=> item.finished===false )
      },
      orderNum(){
        return this.orderfilterList.length;
      }
    },
  }
</script>

<style lang="scss">
  page {
    background-color: #ecfdfa;
  }

  .top-navigate {
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      font-weight: bold;
    }

    .runner {
      font-size: 45rpx;
      margin: 0 10px;
      font-weight: 700;
    }
  }

  .no-more {
    display: flex;
    justify-content: center;
    color: darkgrey;
    font-size: 22px;
    font-weight: 700;
    margin-top: 20px;
    padding-bottom: 100px;
  }
</style>